<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">站点拓扑图</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_topology"></div> 
        </div> 
      </div> 
    </div>   
  </div>
</template>

<script>
export default {
  name: "topology",
  data() {
    return {
      option: null,
      timer: null
    }
  },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_topology'));
      let datas = [
        
        {
            "name": "外网",
            "value":"123",
             symbol:'image://',
            "children": 
            [
              {
                "name": "防火墙",
                "value":'111',
                symbol:'image://',
                "children": [
                  {
                    "name": "交换机",
                    "value":"jjjjj",
                    symbol:  'image://',
                    "children": [
                      {
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      },{
                        "name": "交换机111",
                        symbol:'image://',
                                
                      }
                        
                    ]
                        
                    }
                ]
              },
                
            ]
        }
        
        
      ];
        
      this.option = 
      {
            series: [{
                type: 'tree', // 设置树图
                name: 'xxxx',
                orient: 'TB', // 树图发散的方向，（只有在 layout = 'orthogonal' 的时候，该配置项才生效）对应有 水平 方向的 从左到右，从右到左；以及垂直方向的 从上到下，从下到上。取值分别为 'LR' , 'RL', 'TB', 'BT'。注意，之前的配置项值 'horizontal' 等同于 'LR'， 'vertical' 等同于 'TB'。
                data: datas, // 树图所需要的的数据
                left: '0%',
                right: '0%',
                layout: 'orthogona', // 正交布局（水平布局）
                symbolSize: [40, 40], // 标记大小
                initialTreeDepth: 4, // 树图层级
                label: { 
                  color: '#fff',
                    offset:[0,30],
                    formatter: [
                        `{a|{b}}`, // {b}：数据名。
                        //`{d|{c}}`  {c}：数据值。
                    ].join('\n'),
                    rich: {
                        a: { // 设置a的样式
                            color: 'black',
                            height:20
                        },
                        d:{// 设置d的样式
                            color:"green",
                            offset:[40,40]
                        }
                    }
                },
                lineStyle: {
                    curveness: 0.5, // 树图边的曲度
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#000',
                    borderWidth:1,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }]
        }


      myChart.setOption(this.option, true);

      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less" scoped>
  .chartsdom {
    width: 100%;
    height: 100%;
  }
</style>
